<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>热门活动</title>

    <link rel="stylesheet" href="css/北大青鸟课程导航.css">


    <style>




        #hot{width: 780px;height: auto}

        strong{float: right;padding-right: 100px}
        h2{margin-top: 10px}


        .clear:after{
            content: '';          /*在clear类后面添加内容为空*/
            display: block;      /*把添加的内容转化为块元素*/
            clear: both; }        /*清除这个元素两边的浮动*/

        #hot ul li{float: left;margin-top: 30px;margin-left: 20px;text-align: center}

        #hot{margin: 0 auto}








    </style>
</head>
<body>

<div id="hot" class="clear">

    <h2>热门活动<strong>更多</strong></h2>
    <ul>

        <li>
            <img src="img/活动1.png" width="277" height="106">
              <p>推荐活动 | 原创音乐现金榜T榜</p>
        </li>


        <li>
            <img src="img/活动2.png" width="277" height="106">
            <p>推荐活动 | 原创音乐现金榜T榜</p>
        </li>

        <li>
            <img src="img/活动3.png" width="277" height="106">
            <p>推荐活动 | 原创音乐现金榜T榜</p>
        </li>

        <li>
            <img src="img/活动4.png" width="277" height="106">
            <p>推荐活动 | 原创音乐现金榜T榜</p>
        </li>


    </ul>





</div>

</body>
</html>